<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="<%=basePath%>resources/js/common/plugin/jquery/jquery.min.js"></script>
<script src="<%=basePath%>resources/js/common/plugin/easyui/jquery.easyui.min.js"></script>
<script src="<%=basePath%>resources/js/common/plugin/easyui/locale/easyui-lang-zh_CN.js"></script>
<title>平台考核</title>
<style>
	body,
	div,
	dl,
	dt,
	dd,
	ul,
	ol,
	li,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	pre,
	form,
	fieldset,
	input,
	textarea,
	p,
	blockquote,
	th,
	td,
	tr,
	table {
	    margin: 0;
	    padding: 0;
	    -webkie-box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    box-sizing: border-box;
	}
	
	ol,
	ul {
	    list-style: none;
	}
	
	iframe {
	    border: none;
	}
	
	a {
	    text-decoration: none;
	    color: #666;
	}
	
	a:focus,
	a:hover {
	    text-decoration: none;
	}
	
	.center {
	    text-align: center;
	}
	
	.label {
	    text-shadow: none;
	    background: none;
	    color: #666;
	    font-weight: 400;
	    margin-bottom: 0;
	}
	
	.dn {
	    display: none;
	}
	
	.db {
	    display: block;
	}
	
	.pr {
	    position: relative;
	}
	
	.pa {
	    position: absolute;
	}
	
	.fl {
	    float: left;
	}
	
	.fr {
	    float: right;
	}
	/*.clearfix {clear: both;}*/
	
	.clearfix {
	    zoom: 1;
	}
	
	.clearfix:after {
	    display: block;
	    clear: both;
	    content: "";
	    visibility: hidden;
	    height: 0;
	    font-size: 0;
	}
	
	body {
	    width: 1130px;
	    margin: 0 auto;
	    font-size: 14px;
	    padding: 10px 0px;
	}
	
	.header {
	    background: white;
	    height: 148px;
	    padding: 10px;
	}
	
	.header img {
	    width: 62px;
	    height: 58px;
	}
	
	.header .transportation {
	    font-size: 20px;
	    font-weight: bolder;
	    margin-top: 15px;
	}
	
	.header .time {
	    margin-top: 7px;
	}
	
	.header .spanColor {
	    color: #FF9900;
	    font-size: 20px;
	    font-weight: bold;
	    padding: 0 5px;
	}
	
	.header a {
	    color: #00ccff;
	    text-decoration: underline;
	    margin-left: 5px;
	}
	
	.detailData {
	    margin-top: 2px;
	    background: white;
	    width: 735px;
	    height: 115px;
	    padding-top: 25px;
	}
	
	.detailData ul {
	    display: inline-block;
	    height: 60px;
	}
	
	.detailData li {
	    list-style: none;
	    height: 85px;
	}
	
	.detailData .line {
	    display: inline-block;
	    width: 1px;
	    background: #ccc;
	    height: 85px;
	}
	
	.detailData .data {
	    width: 180px;
	    text-align: center;
	}
	
	.detailData span {
	    border-bottom: none;
	    color: #00ccff;
	    font-size: 32px;
	    font-weight: 400;
	    border-bottom:none !important;
	}
	
	.detailData p {
	    color: #ccc;
	}
	
	.assessment {
	    margin-top: 20px;
	}
	
	.assessment .assessmentTop {
	    background: #99ccff;
	    padding: 0 5px;
	    width: 100%;
	    height: 30px;
	    list-style: 30px;
	}
	
	.aTopLeft {
	    line-height: 30px;
	    color: white;
	}
	
	.aTopRight {
	    margin-top: 7px;
	}
	
	#assessment {
	    width: 100%;
	    height: 270px;
	    background: white !important;
	}
	
	.regional .regionalTop {
	    background: #99ccff;
	    padding: 0 5px;
	    width: 100%;
	    height: 30px;
	    list-style: 30px;
	    color: white;
	    margin-top: 20px;
	}
	
	.regionalTop .rTopLeft {
	    line-height: 30px;
	}
	
	.regionalTop .rTopRight {
	    margin-top: 7px;
	}
	
	#regional {
	    width: 100%;
	    height: 100px;
	    background: white;
	}
	
	.alarm {
	    margin-top: 20px;
	}
	
	.alarmTop {
	    background: #99ccff;
	    padding: 0 5px;
	    width: 100%;
	    height: 30px;
	    list-style: 30px;
	    color: white;
	}
	
	.alarmTop .rTopLeft {
	    line-height: 30px;
	}
	
	.alarmTop .rTopRight {
	    margin-top: 7px;
	}
	
	.alarmBottom {
	    height: 300px;
	    background: white;
	}
	
	#abLeft {
	    width: 40%;
	    height: 100%;
	}
	
	#abRight {
	    width: 58%;
	    height: 100%;
	}
	
	.regionalBottom {
	    background: white;
	    height: auto;
	}
	
	.regionalBottom table {
	    border-collapse: collapse;
	    width: 1100px;
	}
	
	.regionalBottom tr th {
	    height: 35px;
	    border-collapse: collapse;
	    border: 1px solid #ccc;
	    font-weight: normal;
	}
	
	.regionalBottom td {
	    height: 35px;
	    border-collapse: collapse;
	    border: 1px solid #ccc;
	}
	/* #ajax-loading,#mask{display:block;} */
	
	#leftCity li,
	#rightCity li {
	    cursor: pointer;
	}
	
	.alarm .barechart .list {
	    cursor: pointer;
	}
	
	tr,
	th,
	td {
	    border: 1px solid #dedede;
	}
	
	th,
	td {
	    height: 25px;
	    padding: 0 10px;
	}
	
	body ol,
	body ul,
	body .qmbox ul li {
	    list-style: none;
	}
	
	.qmbox ul li {
	    list-style: none !important;
	}
</style>
    <script type="text/javascript">
    	$(document).ready(function(){    	
    		var params ={
    				platformId :$('#platformId').val(),
    				timeType : $('#timeType').val(),
    				year :$('#year').val(),
    				time :$('#time').val(),
    				queryTime:$('#queryTime').val(),
    		};
    		var baseUrl =$('#url').val();
    		$.ajax({
    			type : 'post',
    			async : true,
    			url : baseUrl,
    			cache : false,
    			data:params,
    			dataType : "jsonp",
    			jsonp: 'jsonpCallback',
    			success : function(data) {
    				console.log(data);
    				if(data){
	    				$('#contacts').html(data.contacts);
	    				$('#time').html(data.time);
	    				$('#start_end').html(data.start_end);
	    				$('#ranking').html(data.platform.ranking);
	    				$('#vehicle_count').html(data.platform.vehicle_count);
	    				$('#vehicle_access_count').html(data.platform.vehicle_access_count);
	    				$('#enterprise_count').html(data.platform.enterprise_count);
	    				$('#dealRate').html(data.dealRate);
	    				$('#table').html(data.resultList);
	    			}
    			}	
    		});
    		
    	});
    </script>
</head>

<body id='mailContentContainer' >
	<input type="hidden" id='platformId' value="${platformId}">
	<input type="hidden" id='timeType' value="${timeType}">
	<input type="hidden" id='year' value="${year}">
	<input type="hidden" id='time' value="${time}">
	<input type="hidden" id='queryTime' value="${queryTime}">
	<input type="hidden" id='url' value="${url}">
	<div style="border: 3px solid #eeeaea ;width: 100%;">
	<div style="padding: 10px 10px 50px 10px;">
    <div class="header">
        <img src="${pic}/image/pic/email/icon.png" alt="">
        <p class="transportation">尊敬的<span id='contacts'></span>，您好：</p>
        <p class="time">
        	<span>${year}年&nbsp;${timeType=='week'?'第':''}</span>
        	<span class="spanColor" style='color: #FF9900;font-size: 20px;font-weight: bold;padding: 0 5px;'>${time}</span>
        	<span>${timeType=='week'?'周':'月'}</span>
        	<span id="start_end"></span>&nbsp;&nbsp;&nbsp;&nbsp;排名第&nbsp;
        	<span class="spanColor" id="ranking"></span>&nbsp;名</p>
    </div>
    <div class="detailData">
        <ul class="clearfix">
            <li class="data fl">
                <span id="vehicle_count"></span>
                <p>车辆总数</p>
            </li>
            <li class="line fl"></li>
            <li class="data fl">
            	<span id="vehicle_access_count"></span>
                <p>入网总数</p>
            </li>
            <li class="line fl"></li>
            <li class="data fl">
            	<span id="enterprise_count"></span>
                <p>业户数</p>
            </li>
            <li class="line fl"></li>
            <li class="data fl">
            	<span id="dealRate"></span>
                <p>处警率</p>
            </li>
        </ul>
    </div>

    <div class="regional">
        <div class="regionalTop clearfix" style='width:1100px'>
            <div class='fl rTopLeft'>
            	平台<span>${timeType=='week'?'周':'月'}</span>考核
            </div>
        </div>
       <div class="regionalBottom"><table cellspacing='0'>
       		<thead bgcolor='#eee' style="font-size:12px;"> 
					<tr>
						<th>排名</th>
						<th>得分</th>
						<th>平台名称</th>
						<th>平台连通率(%)</th>
						<th>车辆总数(辆)</th> 
	        			<th>入网车辆数(辆)</th>
	        			<th>入网率(%)</th>
	        			<th>上线率(%)</th>
	        			<th>数据合格率(%)</th> 
	        			<th>轨迹完整率(%)</th>
	        			<th>卫星定位车辆飘移率(%)</th>
	        		</tr>
	        </thead>
                <tbody id="table" style="font-size:12px; text-align:left;">
                </tbody>
            </table>
        </div>
        
    </div>
     </div>
    </div>
</body>
</html>